<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MVVM模型</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        MVVM模型
						1. M：模型(Model) ：data中的数据
						2. V：视图(View) ：模板代码
						3. VM：视图模型(ViewModel)：Vue实例
			  观察发现：
						1.data中所有的属性，最后都出现在了vm身上。
						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
    -->

    <!-- MVVM模型 -->

    <!-- View层 -->
    <div id="root1">
      <h1>hello,{{name}}</h1>
      <h1>hello,{{address}}</h1>
    </div>

    <script type="text/javascript">
      // ViewModel层
      const vm = new Vue({
        el: "#root1",
        // Model层
        data: {
          name: "lhk",
          address: "whut",
        },
      });
      console.log(vm);
    </script>
  </body>
</html>
